<template>
    <Head>
        <Title>Home</Title>
    </Head>
    <section class="banner brand-4 bg--cover" :style="`background-image:url(${$config.public.baseUrl}images/banner/shape1.png)`">
        <div class="container">
            <BannerContent />
        </div>
        <BannerIcon />
    </section>

    <div class="categories categories--style4 padding-top">
        <div class="container">
            <Categories :categoryListFour="categoryListFour" />
        </div>
    </div>

    <section class="about about--style4 padding-top padding-bottom">
        <div class="container">
            <About />
        </div>
        <div class="about__shape">
            <span class="about__shape-item"><img src="/images/about/4.png" alt="star"></span>
        </div>
    </section>

    <section class="course course--style4 bg--cover" :style="`background-image:url(${$config.public.baseUrl}images/bg/home4/1.png)`">
        <div class="container" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
            <PopularCourse :courses="courses" />
        </div>
    </section>

    <section class="story padding-top padding-bottom">
        <div class="container" data-aos="fade-up" data-aos-duration="800" data-aos-delay="100">
            <Story />
        </div>
    </section>

    <section class="team  team--style1 team--home4 padding-top padding-bottom bg--full"
        :style="`background-image:url(${$config.public.baseUrl}images/bg/home4/2.png)`">
        <div class="container" data-aos="fade-up" data-aos-duration="800">
            <Teams :mentors="mentors" />
        </div>
    </section>

    <section class="gallery padding-bottom padding-top">
        <div class="container" data-aos="fade-up" data-aos-duration="800">
            <Gallery />
        </div>
    </section>

    <section class="testimonial testimonial--style1 padding-top padding-bottom brand-4">
        <div class="container" data-aos="fade-up" data-aos-duration="800">
            <Testimonials :testimonials="testimonials" />
        </div>
    </section>

    <section class="blog blog--style1 padding-top padding-bottom bg--defult"
        :style="`background-image:url(${$config.public.baseUrl}images/bg/home4/3.png)`">
        <div class="container">
            <Blogs :posts="posts.slice(0, 9)" />
        </div>
    </section>

    <div class="newsletter">
        <div class="container" data-aos="fade-up" data-aos-duration="800" data-aos-delay="200">
            <NewsletterFour />
        </div>
    </div>
</template>

<script>
import BannerContent from '@/components/modules/index4/BannerContent.vue'
import BannerIcon from '@/components/modules/index4/BannerIcon.vue'
import Categories from '@/components/modules/index4/Categories.vue'
import About from '@/components/modules/index4/About.vue'
import PopularCourse from '@/components/modules/index4/PopularCourse.vue'
import Story from '@/components/modules/index4/Story.vue'
import Teams from '@/components/modules/index4/Teams.vue'
import Gallery from '@/components/modules/index4/Gallery.vue'
import Testimonials from '@/components/modules/index4/Testimonials.vue'
import Blogs from '@/components/modules/index4/Blogs.vue'
import NewsletterFour from '@/components/partials/newsletters/NewsletterFour.vue'

definePageMeta({
    layout: "index4",
});

export default {
    components: {
        BannerContent, BannerIcon, Categories, About, PopularCourse, Story, Teams, Gallery,
        Testimonials, Blogs, NewsletterFour
    },
    async setup() {
        const { axios } = fetchData();

        const generals = await axios.get('/general.json')
        const categoryListFour = generals.data.categoryListFour

        const homeTestimonialsResponse = await axios.get('/index4/home_testimonials.json')
        const testimonials = homeTestimonialsResponse.data

        const coursesResponse = await axios.get('/index4/home_courses.json')
        const courses = coursesResponse.data

        const mentor = await axios.get('/mentor.json')
        const mentors = mentor.data.mentors

        const blogsResponse = await axios.get('/index4/home_blogs.json')
        const posts = blogsResponse.data
        return {
            categoryListFour,
            courses,
            mentors,
            testimonials,
            posts
        };
    },
}
</script>

<style></style>